<template>
  <div id="base-layout">
    <a-layout>
      <a-layout-header class="header">
        <GlobalHeader />
      </a-layout-header>
      <a-layout>
        <GlobalSider class="side" />

        <a-layout-content class="content">
          <router-view :key="route.fullPath" />
          <a-back-top :style="{bottom: '20vh'}" />
        </a-layout-content>
        <AiAssistant />
      </a-layout>
      <a-layout-footer class="footer">
        <a href="#" target="_blank">鹿七 触图万象</a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import GlobalHeader from '@/layouts/GlobalHeader.vue'
import GlobalSider from '@/layouts/GlobalSider.vue'
import { useRoute } from 'vue-router'
import AiAssistant from '@/components/AiAssistant.vue'

const route = useRoute()
</script>

<style scoped lang="scss">
#base-layout {
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
  }

  .content {
    margin-top: 60px;
    padding: 10px 20px 70px 10px;
    background: linear-gradient(to right, #f5f5f5, #fff);
  }

  .side {
    position: fixed;
    margin-top: 10vh;
    z-index: 10;
    height: 60vh;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .header {
    width: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
    background: #fff;
    padding: 0 20px;
    box-shadow: 0 2px 8px #f0f1f2;
  }
}
</style>
